<template>
  <div>
    <div class="fictitious_search">
      <top-search></top-search>
    </div>
    <div class="selected_top">
      <mt-navbar v-model="selectedTop" :fixed="searchBarFixed">
        <mt-tab-item v-for="(item) in selectedList" :key="item.id" :id="item.diyname">
          <div @click="getInformation(item.diyname)">{{item.name}}</div>
          <!--<div>{{item.title}}</div>-->
        </mt-tab-item>
      </mt-navbar>
    </div>
    <div class="information_content_" id="information_content_" ref="wrapper">
      <keep-alive>
        <information-content :content="informationData.data"></information-content>
      </keep-alive>
      <div v-show="informationData.last_page !== 0">
        <div class="btnLoadMore" v-show="formListData.page !== informationData.last_page" @click="loadMore">
          点击加载更多
        </div>
      </div>
      <!-- 点击加载更多 end -->
    </div>
    <div>
      <tab-bar :selected="selecteds"></tab-bar>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import TopSearch from '../../components/common/TopSearch'
  import TabBar from '../../components/common/TabBar';
  import InformationContent from '../../components/listComponents/InformationContent'
  import {Navbar, TabItem, TabContainer, TabContainerItem,Indicator} from 'mint-ui';
  import {ChildrenList, InformationList} from '../../axios/api';
  import {getCityName} from '../../assets/js/cache';

  Vue.component(Navbar.name, Navbar);
  Vue.component(TabItem.name, TabItem);
  Vue.component(TabContainer.name, TabContainer);
  Vue.component(TabContainerItem.name, TabContainerItem);
  export default {
    name: 'Information',
    data() {
      return {
        selecteds: 'Information',
        selectedTop: 2,
        selectedList: [],
        formData: {
          diyname: 'zx'
        },
        formListData: {
          city_id: getCityName().CODE,
          name: 'dcxw',
          page: 1,
          keywords: ''
        },
        informationData: {},
        searchBarFixed: false,
        topStatus: '',
        bottomStatus: '',
        allLoaded: false,
        // wrapperHeight: 0,
        isMoreShow: false //点击加载更多
      }
    },
    beforeRouteLeave(to, from, next) {
      // 设置下一个路由的 meta
      to.meta.keepAlive = true;
      next();
    },
    watch: {
      // selectedTop() {
      //   console.log(this.selectedTop);
      //   this.getInformation(this.selectedTop);
      // }
    },

    methods: {
      // goDetails(id) {
      //   // this.$router.push({name:'InformationDetails/id',query:{id:id}})
      //   this.$router.push('/InformationDetails/' + id);
      //   console.log(id)
      // },
      loadTop() {  // 刷新数据的操作
        let that = this;
        //that.formListData.page = 1;
        that.formListData.page = 1;
        setTimeout(function() {
          // that.informationData.data.splice(0, that.informationData.data.length);
          if (that.formListData.page > that.informationData.last_page) {
            //说明已经到了最后一页了
            return;
          }
          that.getInformation(that.formListData.name);
        }, 2000);

      },

      //底部
      // handleBottomChange: function(status) {
      //   this.bottomStatus = status;
      // },

      //底部点击加载更多
      loadMore: function() {
        let that = this;
        this.formListData.page += 1;
        if (this.formListData.page === that.informationData.last_page) {
          //隐藏点击加载更多
          that.isMoreShow = false;
        }
        if (this.formListData.page > that.informationData.total) {
          return;
        }
        InformationList(this.formListData).then(res => {
          //添加数据进数组
          that.informationData.data = [...that.informationData.data, ...res.data.data];

        }).catch(err => {
          console.log(err);
        })

      },

      //点击栏目获取当前栏目 资讯列表
      getInformation(diyname) {
        let that = this;
        that.formListData.page = 1;
        that.formListData.name = diyname;
        Indicator.open({
          // text: '加载中...',
          spinnerType: 'snake'
        });
        //返回顶部
        document.body.scrollTop = document.documentElement.scrollTop = 0;
        InformationList(that.formListData).then(res => {
          Indicator.close();
          that.informationData = res.data;
          that.isMoreShow = true;

        }).catch(err => {
          console.log(err);
        })
      },
      //获取栏目列表
      getChildrenList() {
        let that = this;
        ChildrenList(that.formData).then(res => {
          that.selectedList = res.data;
          that.selectedTop = res.data[0].diyname;
          that.getInformation(that.selectedTop);
        }).catch(err => {
          console.log(err)
        })
      },
      handleScroll() {
        // let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        let scrollTop = window.pageYOffset;
        if (scrollTop > 49) {
          this.searchBarFixed = true
        } else {
          this.searchBarFixed = false
        }
      }
    },
    mounted() {
      window.addEventListener('scroll', this.handleScroll);

      this.$nextTick(function() {
        let moveWarp = document.getElementById('information_content_');

      });

    },
    created() {
      this.getChildrenList();
      console.log('000')
    },
    components: {
      InformationContent,
      TopSearch,
      TabBar,
    }

  }
</script>

<style scoped>
  .fictitious_search {
    background-color: #e6191e;
    padding: 10px;
  }

  .selected_top {
    background-color: #e6191e;
    color: #ffffff;
    padding-bottom: 0px;
  }

  .selected_top .mint-navbar .mint-tab-item.is-selected {
    color: #ffffff;
    border-bottom: 3px solid #ffffff;
  }

  .selected_top .mint-navbar {

    background-color: #e6191e;
    color: #ffffff;
    height: 40px;
    line-height: 40px;
    padding: 0 10px 10px 10px;
    font-size: 1rem;
  }

  .selected_top .mint-tab-item .mint-tab-item-label {
    font-size: 1rem;
  }

  .selected_top .mint-navbar .mint-tab-item.is-selected {
    border-bottom: 3px solid #ffffff;
    color: #ffffff;
    /*margin-bottom: -3px;*/
  }

  .selected_top .mint-navbar .mint-tab-item {
    padding: 17px 0;
  }

  .information_content_ {
    margin-bottom: 50px;
    padding-bottom: 50px;
    /*height: 100%;*/
  }

  .selected_top .isFixed {
    position: fixed;
    background-color: #Fff;
    top: 0;
    z-index: 999;
  }

  .margin_top {
    margin-top: 50px;
  }

  .information_content {
    display: flex;
    padding: 10px;
    font-size: 0.9rem;
    color: #333333;
    height: 5rem;
  }

  .information_content img {
    width: 7rem;
    height: 100%;
  }

  .information_content .information_content_right {
    margin-left: 10px;
    position: relative;
    flex: 1;
  }

  .information_content .information_content_right .time {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 0.8rem;
    color: #999999;
  }

  .information_content image[lazy=loading] {
    width: 7rem;
    height: 100%;
  }

  .btnLoadMore {
    width: 100%;
    height: 40px;
    background-color: #f8f8f8;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
  }
</style>
